<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生注册</title>
    <style>
        .form-group { margin: 10px 0; }
        label { display: block; margin-bottom: 5px; }
        input, select { width: 200px; padding: 5px; }
    </style>
</head>
<body>
<h2>学生注册</h2>
<form id="registerForm">
    <div class="form-group">
        <label for="account">学号:</label>
        <input type="text" id="account" required>
    </div>

    <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" required>
    </div>

    <div class="form-group">
        <label for="tel">电话:</label>
        <input type="tel" id="tel" required>
    </div>

    <!--学院选择框-->
    <div class="form-group">
        <label for="collegeSelect">学院:</label>
        <select id="collegeSelect" required onchange="loadMajors(this.value)">
            <option value="">请选择学院</option>
        </select>
    </div>

    <!--专业选择框-->
    <div class="form-group">
        <label for="majorSelect">专业:</label>
        <select id="majorSelect" required disabled>
            <option value="">请先选择学院</option>
        </select>
    </div>

    <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" required>
    </div>

    <button type="button" onclick="register()">注册</button>
</form>

<script>
    //页面加载时自动加载学院
    document.addEventListener('DOMContentLoaded', function() {
        console.log('页面加载完成，开始加载学院数据...');
        loadColleges();
    });

    //加载学院列表
    async function loadColleges() {
        try {
            console.log('开始加载学院列表...');
            const response = await fetch('http://localhost:8080/api/open/colleges');
            console.log('响应状态:', response.status);

            if (!response.ok) {
                throw new Error(`HTTP错误! 状态: ${response.status}`);
            }

            const result = await response.json();
            console.log('学院列表响应:', result);

            if (result.code === 200) {
                const collegeSelect = document.getElementById('collegeSelect');
                collegeSelect.innerHTML = '<option value="">请选择学院</option>';

                if (result.data && result.data.length > 0) {
                    result.data.forEach(college => {
                        const option = document.createElement('option');
                        option.value = college.id.toString();
                        option.textContent = college.name;
                        collegeSelect.appendChild(option);
                    });
                    console.log('学院列表加载完成');
                } else {
                    console.warn('学院数据为空');
                }
            } else {
                alert('加载学院列表失败: ' + (result.message || '未知错误'));
            }
        } catch (error) {
            console.error('加载学院列表失败:', error);
            alert('加载学院列表失败: ' + error.message);
        }
    }

    //根据学院加载专业
    async function loadMajors(collegeId) {
        const majorSelect = document.getElementById('majorSelect');

        if (!collegeId) {
            majorSelect.innerHTML = '<option value="">请先选择学院</option>';
            majorSelect.disabled = true;
            return;
        }

        try {
            console.log('开始加载专业列表，学院ID:', collegeId);
            majorSelect.disabled = true;
            majorSelect.innerHTML = '<option value="">加载中...</option>';

            const response = await fetch(`http://localhost:8080/api/open/colleges/${collegeId}/majors`);

            if (!response.ok) {
                throw new Error(`HTTP错误! 状态: ${response.status}`);
            }

            const result = await response.json();
            console.log('专业列表响应:', result);

            if (result.code === 200) {
                majorSelect.innerHTML = '<option value="">请选择专业</option>';
                majorSelect.disabled = false;

                if (result.data && result.data.length > 0) {
                    result.data.forEach(major => {
                        const option = document.createElement('option');
                        option.value = major.id.toString();
                        option.textContent = major.name;
                        majorSelect.appendChild(option);
                    });
                    console.log('专业列表加载完成');
                } else {
                    majorSelect.innerHTML = '<option value="">该学院暂无专业</option>';
                }
            } else {
                alert('加载专业列表失败: ' + (result.message || '未知错误'));
                majorSelect.innerHTML = '<option value="">加载专业失败</option>';
                majorSelect.disabled = true;
            }
        } catch (error) {
            console.error('加载专业列表失败:', error);
            majorSelect.innerHTML = '<option value="">加载专业失败</option>';
            majorSelect.disabled = true;
        }
    }

    // 注册提交
    async function register() {
        const formData = {
            name: document.getElementById('name').value.trim(),
            account: document.getElementById('account').value.trim(),
            tel: document.getElementById('tel').value.trim(),
            password: document.getElementById('password').value,
            collegeId: document.getElementById('collegeSelect').value,
            majorId: document.getElementById('majorSelect').value
        };

        console.log('提交的数据:', formData);

        if (!formData.name || !formData.account || !formData.tel || !formData.password || !formData.collegeId || !formData.majorId) {
            alert('请填写所有必填字段');
            return;
        }

        try {
            console.log('开始注册请求...');

            const response = await fetch('http://localhost:8080/api/open/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            });

            if (!response.ok) {
                throw new Error(`HTTP错误! 状态: ${response.status}`);
            }

            const result = await response.json();
            console.log('注册响应:', result);

            if (result.code === 200) {
                alert('注册成功！');
                document.getElementById('registerForm').reset();
                loadColleges(); //重置选择
            } else {
                alert('注册失败: ' + (result.message || '未知错误'));
            }
        } catch (error) {
            console.error('注册失败:', error);
            alert('注册失败: ' + error.message);
        }
    }
</script>
</body>
</html>